<template>
	<view class="shop-popup">
		<view class="shop-popup__head">
			<text>{{storeName||'商品列表'}}</text>
			<view class="shop-popup__head-close bg-hover" @tap="hide">
				<u-image width="32rpx" height="32rpx"
					src="https://file.casugn.com/storecompcard/static/img/back_1682060889261.png"></u-image>
			</view>
		</view>
		<scroll-view class="shop-popup__content" scroll-y @scrolltolower="scrolltolower">
			<view @tap.stop.prevent>
				<view v-if="items.length>0" class="shop-popup__shops">
					<view v-for="(item, index) in items" :key="index" class="shop-popup__shop" @click="itemToDetail(item)">
						<u-image width="314rpx" height="314rpx" radius="8rpx"
							:src="item.goodsImage||'https://file.casugn.com/storecompcard//4T4oGCfkpPX5a59439bdbafef1bd4ed417e476813128_1660543910299.png'">
						</u-image>
						<text class="shop-popup__shop-name textHide-1">{{item.goodsName||'[暂无商品名称]'}}</text>
						<text class="shop-popup__shop-brief">{{item.goodsBrief||''}}</text>
						<text class="shop-popup__shop-price">{{item.marketPrice||item.goodsPrice}}</text>
					</view>
				</view>

				<template v-if="loadMoreStatus!=='loading'&&!items.length">
					<u-empty marginTop="40rpx" width="240rpx" height="240rpx" text="暂时没有商品" textSize="28rpx" textColor="#86909C"
						icon="https://file.casugn.com/storecompcard/temp/空页面@2x(11)_1681113828976.png"></u-empty>
					<u-button color="#276AEE" throttleTime="500"
						:customStyle="{width:'232rpx', height:'64rpx', marginTop:'16rpx', fontSize:'28rpx'}"
						@click="toShopList">进入我的店铺</u-button>
					<view class="shop-popup__empty-remark">或者：打开我的页面-商城模块添加商品</view>
				</template>

				<template v-if="loadMoreStatus==='loading'">
					<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus"
						@loadmore="scrolltolower" />
				</template>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'

	export default {
		data() {
			return {
				visible: false,

				storeId: '',
				storeName: '',
				items: [],
				pageNo: 1,
				pageSize: 10,
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		computed: {
			...mapGetters(['userInfo']),
		},
		methods: {
			init(record) {
				console.log(record);
				this.storeId = record.storeId
				this.storeName = record.name
				this.refresherrefresh()
			},
			hide() {
				this.$emit('back')
			},
			toShopList() {
				uni.navigateTo({
					url: `/pagesBusiness/shopList/shopList`
				})
				this.hide()
			},
			itemToDetail(item) {
				// console.log('获取商品信息', item);
				// 拼接富文本标签
				let tHtml = ''
				if (item.goodsImage) {
					tHtml += `<p style="text-align: center;">`
					tHtml += `<img style="width:100%;height:auto;text-align: center;" src="${item.goodsImage}" class="myCustImg" >`
					tHtml += `</p>`
				}
				if (item.goodsName) {
					tHtml += `<p style="text-align: center;">`
					tHtml += `<strong style="font-size: 18px;">${item.goodsName}</strong>`
					tHtml += `</p>`
				}
				if (item.goodsBrief) {
					tHtml += `<p style="text-align: center;">`
					tHtml += `<strong style="font-size: 16px;">${item.goodsBrief}</strong>`
					tHtml += `</p>`
				}
				if (item.goodsPrice) {
					tHtml += `<p style="text-align: center;">`
					tHtml += `<span style="font-size: 14px;">价格: ${item.goodsPrice} </span>`
					tHtml += `</p>`
				}
				this.$emit("select", { html: tHtml, goods: item })
			},
			// 商铺列表
			getDBData(type = 'refresh') {
				let params = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					storeId: this.storeId,
					sort: 0,
					keyword: '',
					goodsIds: '',
					openId: '',
					column: 'createTime',
					order: 'desc',
				}
				this.$api.getB2bCShoppingList(params).then(res => {
					if (res.success) {
						let tData = res.result.records
						if (type === 'refresh') {
							this.items = tData
						}
						if (type === 'add') {
							this.items.push(...tData)
						}
						console.log('商品列表：', this.items);
						this.loadMoreStatus = res.result.pages > res.result.current ? 'loadmore' : 'nomore'
					} else {
						this.loadMoreStatus = 'nomore'
					}
				}).catch(e => {
					this.loadMoreStatus = 'nomore'
				})
			},
			scrolltolower() {
				if (this.loadMoreStatus === 'nomore') {
					return
				}
				this.loadMoreStatus = 'loading';
				this.pageNo += 1
				this.getDBData('add')
			},
			refresherrefresh() {
				this.loadMoreStatus = 'loading'
				this.items = []
				this.pageNo = 1
				setTimeout(() => {
					this.getDBData('refresh')
				}, 500)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shop-popup {
		position: relative;
		height: 100%;

		.shop-popup__head {
			height: 92rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 44rpx;
			background-color: #fff;

			display: flex;
			justify-content: center;
			align-items: center;

			.shop-popup__head-close {
				position: absolute;
				top: 30rpx;
				right: 32rpx;
			}
		}

		.shop-popup__content {
			position: relative;
			height: calc(100% - 92rpx);

			.shop-popup__shops {
				padding: 20rpx;

				display: flex;
				flex-wrap: wrap;

				.shop-popup__shop {
					width: 314rpx;
					padding: 16rpx 20rpx;

					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.shop-popup__shop-name {
						font-size: 28rpx;
						color: #1D2129;
						line-height: 38rpx;
					}

					.shop-popup__shop-brief {
						margin-top: 6rpx;
						font-size: 26rpx;
						color: #1D2129;
						line-height: 36rpx;
					}

					.shop-popup__shop-price {
						font-size: 26rpx;
						color: #DC2626;
						line-height: 36rpx;

						&:before {
							content: "￥";
							font-size: inherit;
							line-height: inherit;
						}
					}
				}
			}

			.shop-popup__empty-remark {
				margin-top: 32rpx;
				font-size: 24rpx;
				color: #86909C;
				line-height: 34rpx;
				text-align: center;
			}
		}
	}
</style>